<template>
  <div>
    <Header />

    <main>
      <div class="meetup-controls">
        <Button @click="newMeetup">New Meetup</Button>
      </div>
      <EditMeetup
        v-if="editMode === 'add'"
        @save="addMeetup"
        @cancel="cancelEdit"
      />
      <MeetupGrid :meetups="meetups" @togglefavorite="toggleFavorite" />
    </main>
  </div>
</template>

<script>
import Header from "./ui/Header.vue";
import MeetupGrid from "./meetups/MeetupGrid.vue";
// import TextInput from "./ui/TextInput.vue";
import Button from "./ui/Button.vue";
import EditMeetup from "./meetups/EditMeetup.vue";

export default {
  components: { Header, MeetupGrid, Button, EditMeetup },
  data() {
    let meetups = [
      {
        id: "m1",
        title: "Coding Bootcamp",
        subtitle: "Learn to code in 2 hours",
        description:
          "In this meetup, we will have some experts that teach you how to code!",
        imageUrl: "some",
        address: "Taiji Compus",
        contactEmail: "code@test.com",
        isFavorite: false,
      },
      {
        id: "m2",
        title: "Swim Together",
        subtitle: "Let's go for some swimming",
        description: "We will simply swim some rounds!",
        imageUrl: "",
        address: "Olympic",
        contactEmail: "swim@test.com",
        isFavorite: true,
      },
    ];
    let editMode = "";
    let showModel;
    return {
      meetups,
      editMode,
      showModel,
    };
  },
  methods: {
    addMeetup(event) {
      const newMeetup = {
        id: Math.random().toString(),
        title: event.title,
        subtitle: event.subtitle,
        description: event.description,
        imageUrl: event.imageUrl,
        contactEmail: event.email,
        address: event.address,
      };

      this.meetups.push(newMeetup); // DOES NOT WORK!
      // meetups = [newMeetup, ...meetups];
      this.editMode = "";
      this.showModel = false;
    },

    cancelEdit() {
      // console.log("canceling...")
      this.editMode = "";
      this.showModel = false;
    },

    toggleFavorite(id) {
      const updatedMeetup = this.meetups.find((m) => m.id === id);
      updatedMeetup.isFavorite = !updatedMeetup.isFavorite;
    },

    newMeetup() {
      this.editMode = "add";
      this.showModel = true;
    },
  },
};
</script>

<style>
main {
  margin-top: 5rem;
}

form {
  width: 30rem;
  max-width: 90%;
  margin: auto;
}
</style>
